<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!--
        html 的媒体标签只针对 图片、视频、音频
    -->
    <!--
        音频标签 audio 通过 src 属性指定音频资源文件
            同时只有在定义 布尔类型 属性 controls 之后，页面才会呈现出音频文件的效果
            音频标签的呈现效果会因为 系统、浏览器 而呈现出不同结果
    -->
    <audio src="../assets/img/loading.jpg" controls></audio>
    <br>
    <audio src="../assets/media/sample-3s.mp3" controls></audio>
    <br>
    <audio src="../assets/media/sample-3s.mp3" controls autoplay></audio>
    <br>
    <!--
        视频播放器  通过 src 属性指定视频资源文件
            同时只有在定义 布尔类型 属性 controls 之后，页面才会呈现出音频文件的效果
            视频标签的呈现效果会因为 系统、浏览器 而呈现出不同结果
            视频播放资源是否被支持，会因为浏览器不同而不同（默认所有浏览器都支持.wma）
    -->
    <video src="../assets/img/loading.jpg" controls></video>
    <br>
    <video src="../assets/media/big_buck_bunny.mp4" controls></video>
    <br>
    <video src="../assets/media/big_buck_bunny_720p_1mb.flv" controls></video>
    <br>
    <!--
        图片标签  通过 src 属性指定图片资源
            + 图片src可以取值资源路径
            + 图片src也可以执行图片资源代码(base64) => 优化网站加载时间
    -->
    <img src="../assets/img/loading.jpg"> <br>
    <img src="" alt="" srcset="">
    <br>
    <a href="./07.超链接标签.html">
        <img src="../assets/img/loading.jpg">
    </a><br>
    <!--
        媒体标签都具有属性 width hight ，手动定义媒体大小的
    -->
    <img src="../assets/img/loading.jpg" width="40px" height="40px"> <br>
</body>
</html>




